<template>
    <div class="header">
        <!-- 折叠按钮 -->
        <!--<div class="collapse-btn" @click="collapseChage">-->
            <!--<i class="el-icon-menu"></i>-->
        <!--</div>-->
        <!--<div class="logo">后台管理系统</div>-->
        <div class="header-right">
          <div class="breadClum">
            <div class="breadLeft">
              <router-link :to="{path:'/'}">
                 <span class="breadHome ">
                    <img src="../../static/images/home.png" alt="">
                  </span>
              </router-link>
              <router-link :to="{path:'/'}" class="bread-menu-test" >
                   <span class="breadMenu  el-icon-lx-sort" @mouseover="addActive($event)" @mouseout="removeActive($event)">
                        <img src="../../static/images/menu.png" alt="">
                    </span>
              </router-link>
            </div>
            <div class="breadLogo flex1">
              <!-- <img src="../../../static/images/logo.png" alt="">  -->
              <img src="../../static/images/logo.png" alt=""> 
            </div>
            <div class="header-user-con">
                <!-- 用户头像 -->
              <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{username}} <i class="el-icon-caret-bottom"></i>
                        <div class="userApart">
                            <div class="userApartHide">
                                 <p class="user_title">
                                <span>账户信息</span>
                                <span class="userSetting">账户设置</span>
                                <span class="userLogin">退出登录</span>
                            </p>
                            <div class="user_detail">
                                <p>所在部门:  销售部</p>
                                <p>本次登录:  2017-07-03  14 : 36 : 21</p>
                                <p> 登录地区:  广东省 深圳市</p>
                                <p>上次登录:  2017-07-03  14 : 36 : 21</p>
                            </div>
                            </div>

                        </div>
                    </span>
                <el-dropdown-menu slot="dropdown" >
                  <a  target="_blank">
                    <el-dropdown-item>个人中心</el-dropdown-item>
                  </a>
                  <el-dropdown-item divided  command="loginout">退出登录</el-dropdown-item>
                    <el-dropdown-item >切换账号</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
                <!-- <div class="user-avator"><img src="../../assets/img/img.jpg"></div> -->
                <div class="user-avator"><img src="../../static/images/user.png"></div>
                <!-- 用户名下拉菜单 -->
            </div>
        </div>
      </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                collapse: false,
                fullscreen: false,
                name: 'linxin',
                message: 2
            }
        },
        computed:{
            username(){
                let username = sessionStorage.getItem('ms_username');
                return username ? username : this.name;
            }
        },
        methods:{
            // 用户名下拉菜单选择事件
            handleCommand(command) {
                if(command == 'loginout'){
                    sessionStorage.removeItem('ms_username')
                    sessionStorage.removeItem('rand')
                    this.$router.push('/login');
                }
            },
            // 侧边栏折叠
            collapseChage(){
               // this.collapse = !this.collapse;
               // bus.$emit('collapse', this.collapse);
            },
            // 全屏事件
            handleFullScreen(){
                let element = document.documentElement;
                if (this.fullscreen) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                } else {
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.webkitRequestFullScreen) {
                        element.webkitRequestFullScreen();
                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen();
                    } else if (element.msRequestFullscreen) {
                        // IE11
                        element.msRequestFullscreen();
                    }
                }
                this.fullscreen = !this.fullscreen;
            },
            addActive($event){
                $event.currentTarget.className="breadMenu hover el-icon-lx-sort";
            },
            removeActive($event){
                $event.currentTarget.className="breadMenu el-icon-lx-sort";
            }
        },
        mounted(){
            if(document.body.clientWidth < 1500){
                this.collapseChage();
            }
        }
    }
</script>
<style scoped lang="scss">
  .header {
     position: absolute;
     box-sizing: border-box;
     left: 320px;
     right: 0;
     height: 60px;
     font-size: 22px;
     color: #fff;
   }
  .collapse-btn{
      float: left;
      padding: 0 21px;
      cursor: pointer;
      line-height: 70px;
  }
    .header .logo{
        float: left;
        width:250px;
        line-height: 70px;
    }
    .header-right{
        width: 100%;
      .breadClum{
        height: 60px;
        background: white;
        line-height: 60px;
        display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
        display: -moz-box; /* Firefox 17- */
        display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
        display: -moz-flex; /* Firefox 18+ */
        display: -ms-flexbox; /* IE 10 */
        display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
          .breadLeft{
              width:160px;
              a{
                  display: inline-block;
                  height: 100%;
                  color: #c7c7c7;
                  font-size: 24px;
                  .breadHome{
                      margin-left: 30px;
                      vertical-align: middle;
                      height: 60px;
                      line-height: 60px;
                  }
                  .breadMenu{
                      position: relative;
                      height: 60px;
                      line-height: 60px;
                      &.hover{
                          div{
                              display: block;
                          }
                      }
                      div{
                          display: none;
                          position: absolute;
                          left: -75px;
                          top:62px;
                          width: 280px;
                          height: 172px;
                          z-index: 3;
                          background: white;
                          border: 1px solid #efefef;
                          box-shadow: 0 2px 2px #efefef;
                          line-height: 1;
                          &:after{
                              position: absolute;
                              content: '';
                              width: 5px;
                              height: 10px;
                              left: 77px;
                              top:-7px;
                              margin-left: -2px;
                              width: 12px;
                              height: 12px;
                              border-top: 1px solid #efefef;
                              border-right: 1px solid #efefef;
                              transform: rotate(-45deg);
                              -webkit-transform: rotate(-45deg);
                              background: white;
                          }
                          p{
                              font-size: 14px;
                              color: #888888;
                              border-bottom: 1px solid #eeeeee;
                              padding: 11px 0 ;
                              margin:0 16px;
                              box-sizing: border-box;
                              -webkit-box-sizing: border-box;
                              line-height: 1.2;
                          }
                          ul{
                                padding: 13px 25px;
                              box-sizing: border-box;
                              -webkit-box-sizing: border-box;
                              li{
                                  display: inline-block;
                                  font-size: 14px;
                                  color: #333333;
                                  width: 33.3%;
                                  line-height: 36px;
                                  &:hover{
                                      color: #921500;
                                  }
                              }
                          }
                      }

                  }
                  span{
                      margin-left: 30px;
                      display: inline-block;
                      vertical-align: middle;
                  }
              }

            }
            .breadLogo{
                text-align: center;
                -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
                -moz-box-flex: 1;         /* OLD - Firefox 19- */
                -webkit-flex: 1;          /* Chrome */
                -ms-flex: 1;              /* IE 10 */
                flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
                img{
                  display: inline-block;
                  align-items: center;
                  vertical-align: middle;
                }
            }
        }
    }
    .header-user-con{
        width: 130px;
        margin-right: 24px;
        text-align: right;
        display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
        height: 60px;
        align-items: center;
    }
    .btn-fullscreen{
        transform: rotate(45deg);
        margin-right: 5px;
        font-size: 24px;
    }
    .btn-bell, .btn-fullscreen{
        position: relative;
        width: 30px;
        height: 30px;
        text-align: center;
        border-radius: 15px;
        cursor: pointer;
    }
    .btn-bell-badge{
        position: absolute;
        right: 0;
        top: -2px;
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background: #f56c6c;
        color: #fff;
    }
    .btn-bell .el-icon-bell{
        color: #fff;
    }
    .user-name{
        margin-left: 10px;
    }
    .user-avator{
        margin-left: 20px;
    }
    .user-avator img{
        display: block;
        width:40px;
        height:40px;
        border-radius: 50%;
    }
    .el-dropdown-link{
        color: #333;
        cursor: pointer;
    }
    .el-dropdown-menu__item{
        text-align: center;
    }
.user-name .el-dropdown-link{
    position: relative;
    display: inline-block;
    height:100%;
    &:hover{
        .userApart{
            display: block;
        }
    }
    .userApart{
        display: none;
        width: 290px;
        height: 220px;
        position: absolute;
        left: -169px;
        top: 62px;
        z-index: 999;
        background: white;
        border: 1px solid #efefef;
        .userApartHide{
            padding: 0 15px;
            text-align: left;
            .user_title{
                font-size: 14px;
                color: #888888;
                border-bottom: 1px solid #eeeeee;
                line-height: 28px;
                color: #888888;
                padding-top: 10px;
                .userSetting,.userLogin{
                    font-size: 14px;
                    color: #b71a00;
                    float: right;
                    margin-left: 10px;
                }
            }
            .user_detail{
                padding-top: 10px;
                margin-left: 13px;
                p{
                    line-height: 36px;
                    color: #666666;
                    font-size: 14px;
                }
            }
        }

    }
}

</style>


